<template>
  <div :class="classes"
       @mouseenter="handleMouseenter"
       @mouseleave="handleMouseleave"
       v-clickoutside="handleClose">
    <div
      :class="[prefixCls + '-rel']"
      ref="reference"
      @click="handleClick($event)"
      @mousedown="handleFocus(false)"
      @mouseup="handleBlur(false)">
      <slot></slot>
    </div>

    <transition name="fade">
      <div :class="popperClasses"
           :style="styles"
           ref="popper"
           v-show="visible"
           @mouseenter="handleMouseenter"
           @mouseleave="handleMouseleave"
           :placement="placement"
           :data-transfer="transfer"
           v-transfer-dom>
        <div :class="[prefixCls + '-content']">
          <div :class="[prefixCls + '-arrow']"></div>
          <div :class="[prefixCls + '-inner']" v-if="confirm">
            <div :class="[prefixCls + '-body']">
              <i class="ivu-icon ivu-icon-help-circled"></i>
              <div :class="[prefixCls + '-body-message']"><slot name="title">{{ title }}</slot></div>
            </div>
            <div :class="[prefixCls + '-footer']">
              <aty-button type="text" @click.native="cancel">{{ localeCancelText }}</aty-button>
              <aty-button type="primary" @click.native="ok">{{ localeOkText }}</aty-button>
            </div>
          </div>
          <div :class="[prefixCls + '-inner']" v-if="!confirm">
            <div :class="[prefixCls + '-title']" v-if="showTitle" ref="title"><slot name="title"><div :class="[prefixCls + '-title-inner']">{{ title }}</div></slot></div>
            <div :class="[prefixCls + '-body']">
              <div :class="[prefixCls + '-body-content']"><slot name="content"><div :class="[prefixCls + '-body-content-inner']">{{ content }}</div></slot></div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6"  src="./index.js"></script>
